import React, { Component } from 'react';
import { Text, TouchableOpacity, View, Image, ImageBackground, ScrollView, TextInput, FlatList, ActivityIndicator, Animated } from 'react-native';
import Colors from '../constants/Colors';
import { unitWidth, width, statusBarHeight, height, titleHeight } from '../constants/AdapterUtil';
import Modal from "react-native-modal";
import RootModal from "react-native-root-modal";
import Permissions from 'react-native-permissions';
import SyanImagePicker from 'react-native-syan-image-picker';
import TimePickerUtil from './TimePicker';
import NavigationService from '../constants/NavigationService';
import TextUtil from '../constants/TextUtil';
import { Rating, AirbnbRating } from 'react-native-elements';
import Video from 'react-native-video';
import Hyperlink from 'react-native-hyperlink';
import { contactBrowser } from '../constants/Gobrowser';
import FastImage from 'react-native-fast-image';

//我的Item项
export class MeItem extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <View style={{ minHeight: 50 * unitWidth, backgroundColor: Colors.white }} >
                <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}
                    onPress={this.props.onPress}>
                    {this.props.icon}
                    <Text style={{ color: Colors.black, fontSize: 14 * unitWidth, marginLeft: 15 * unitWidth }}>{this.props.text}</Text>
                    <Image source={require('../res/me_back.png')} style={{ width: 7 * unitWidth, height: 12 * unitWidth, position: 'absolute', right: 15 * unitWidth }} />
                </TouchableOpacity>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

export class IconItem extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <View style={{ minHeight: 50 * unitWidth, backgroundColor: Colors.white }} >
                <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}
                    onPress={this.props.onPress} activeOpacity={1}>
                    {this.props.icon}
                    <Text style={{ color: Colors.black, fontSize: 14 * unitWidth, marginLeft: 15 * unitWidth }}>{this.props.text}</Text>
                </TouchableOpacity>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//商家认证Item
export class MerchantCertificationItem extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <View style={{ height: 70 * unitWidth, backgroundColor: Colors.white }} >
                <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }} activeOpacity={0.5}
                    onPress={this.props.onPress}>
                    {this.props.icon}
                    <View style={{ marginLeft: 15 * unitWidth, alignItems: 'flex-start' }}>
                        <Text style={{ color: Colors.color33, fontSize: 15 }}>{this.props.text1}</Text>
                        <Text style={{ color: Colors.color66, fontSize: 13, marginTop: 3 * unitWidth }}>{this.props.text2}</Text>
                    </View>
                    <Text style={{ color: Colors.color66, fontSize: 13, position: 'absolute', right: 30 * unitWidth }}>{this.props.text3}</Text>
                    <Image source={require('../res/me_back.png')} style={{ width: 7 * unitWidth, height: 12 * unitWidth, position: 'absolute', right: 15 * unitWidth }} />
                </TouchableOpacity>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//设置Item项
export class SettingItem extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <View style={[{ backgroundColor: Colors.white }, this.props.style]}>
                <TouchableOpacity style={[{ backgroundColor: Colors.white, height: 50 * unitWidth, width: width, alignItems: 'center', flexDirection: 'row' }, this.props.style]}
                    onPress={this.props.onPress} activeOpacity={0.5}>
                    <Text style={{ color: Colors.black, fontSize: 14 * unitWidth, marginLeft: 20 * unitWidth }}>{this.props.title}</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center', position: 'absolute', right: 15 * unitWidth, justifyContent: 'flex-end' }}>
                        <Text style={{ color: Colors.black, fontSize: 14 * unitWidth, marginRight: 15 * unitWidth }}>{this.props.value}</Text>
                        <Image source={require('../res/me_back.png')} style={{ width: 7 * unitWidth, height: 12 * unitWidth }} />
                    </View>
                </TouchableOpacity>
                {this.props.isLast ?
                    <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} /> : null
                }
            </View>
        );
    }
}

//选择单张图片Item项
export class ChooseSingleImageItem extends Component {

    constructor(props) {
        super(props);
        this.state = {
            image: ''
        }
    }

    render() {
        return (//View加大返回按钮点击范围
            <View style={[{ backgroundColor: Colors.white }, this.props.style]}>
                <Text style={{ fontSize: 17, color: Colors.black, marginLeft: 20 * unitWidth, marginTop: 18 * unitWidth }}>{this.props.title}</Text>
                <TouchableOpacity onPress={this.requestCameraPermission.bind(this)} style={{ alignSelf: 'center', marginVertical: 15 * unitWidth }} activeOpacity={0.5}>
                    {this.state.image && this.state.image != '' ?
                        <Image style={{
                            width: 335 * unitWidth,
                            height: 100 * unitWidth,
                            alignItems: 'center',
                            flexDirection: 'column',
                            borderRadius: 5
                        }} source={{ uri: this.state.image }} resizeMode='contain' /> :
                        <ImageBackground style={{
                            width: 335 * unitWidth,
                            height: 50 * unitWidth,
                            alignItems: 'center',
                            flexDirection: 'column',
                            borderRadius: 5,
                        }} source={require('../res/me_smrzadd.png')} resizeMode='stretch' />}
                </TouchableOpacity>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }

    //选择照片
    requestCameraPermission() {
        try {
            Permissions.request('camera', {
                type: 'always',
            }).then(response => {
                console.log(response)
                if (response === 'authorized') {
                    this.doChoose();
                }
            }).catch(err => {
                console.log(err)
            })
        } catch (err) {
            console.log(err);
        }
    }

    doChoose() {
        // width	int	图片宽度
        // height	int	图片高度
        // uri	string	图片路径
        // original_uri	string	图片原始路径，仅 Android
        // type	string	文件类型，仅 Android，当前只返回 image
        // size	int	图片大小，单位为字节 b
        // base64	string	图片的 base64 编码，如果 enableBase64 设置 false，则不返回该属性
        SyanImagePicker.showImagePicker({
            imageCount: 1,
            isCamera: false,
            minimumCompressSize: 100,
            quality: 50,
            enableBase64: true
        }, (err, selectedPhotos) => {
            if (err) {
                // 取消选择
                return;
            }
            // 选择成功，渲染图片
            console.log(selectedPhotos[0].uri)
            this.setState({
                image: selectedPhotos[0].uri
            })
            this.props.onChooseSuccess ? this.props.onChooseSuccess(selectedPhotos) : null
        })
    }
}

//选择多张图片Item项
export class ChooseMultiplyImageItem extends Component {

    render() {
        let ImageArray = [];
        if (this.props.ImageList) {
            for (let i = 0, len = this.props.ImageList.length; i < len; i++) {
                let item = this.props.ImageList[i];
                ImageArray.push(
                    <View key={i} style={{ width: 105 * unitWidth, height: 72 * unitWidth, marginTop: 10 * unitWidth, marginRight: 10 * unitWidth }}>
                        <Image
                            style={{ width: 105 * unitWidth, height: 72 * unitWidth }}
                            source={{ uri: item.uri }} resizeMode='cover' />
                        <TouchableOpacity style={{ position: 'absolute', right: 3, top: 3 }} onPress={() => {
                            this.props.onDeletePress ? this.props.onDeletePress(i) : null
                        }}>
                            <Image
                                style={{ width: 21 * unitWidth, height: 21 * unitWidth }}
                                source={require('../res/me_close.png')} resizeMode='cover' />
                        </TouchableOpacity>
                    </View>
                );
            }
        }
        return (//View加大返回按钮点击范围
            <View style={[{ backgroundColor: Colors.white }, this.props.style]}>
                {this.props.title ?
                    <Text style={{ fontSize: 15, color: Colors.black, marginLeft: 20 * unitWidth, marginTop: 18 * unitWidth }}>{this.props.title}</Text>
                    : null}
                {this.props.ImageList && this.props.ImageList.length > 0 ?
                    <View style={{
                        alignSelf: 'stretch',
                        alignItems: 'center',
                        flexDirection: 'row',
                        flexWrap: 'wrap',
                        marginLeft: 20 * unitWidth, marginVertical: 15 * unitWidth
                    }}>
                        {ImageArray}
                        {this.props.ImageList && this.props.ImageList.length < 9 ?
                            <TouchableOpacity onPress={this.requestCameraPermission.bind(this)}>
                                <Image style={{
                                    width: 105 * unitWidth,
                                    height: 72 * unitWidth, marginTop: 10 * unitWidth
                                }} source={require('../res/smrz_add.png')} resizeMode='stretch' />
                            </TouchableOpacity> : null}
                    </View> :
                    <TouchableOpacity style={{ alignSelf: 'center', marginVertical: 15 * unitWidth }} onPress={this.requestCameraPermission.bind(this)}>
                        <Image style={{
                            width: 335 * unitWidth,
                            height: 50 * unitWidth,
                        }} source={require('../res/me_smrzadd.png')} resizeMode='stretch' />
                    </TouchableOpacity>}
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }

    //选择照片
    requestCameraPermission() {
        try {
            Permissions.request('camera', {
                type: 'always',
            }).then(response => {
                console.log(response)
                if (response === 'authorized') {
                    this.doChoose();
                }
            }).catch(err => {
                console.log(err)
            })
        } catch (err) {
            console.log(err);
        }
    }

    doChoose() {
        // width	int	图片宽度
        // height	int	图片高度
        // uri	string	图片路径
        // original_uri	string	图片原始路径，仅 Android
        // type	string	文件类型，仅 Android，当前只返回 image
        // size	int	图片大小，单位为字节 b
        // base64	string	图片的 base64 编码，如果 enableBase64 设置 false，则不返回该属性
        SyanImagePicker.showImagePicker({
            imageCount: 9 - this.props.ImageList.length,
            isCamera: false,
            minimumCompressSize: 100,
            quality: 50,
            enableBase64: true
        }, (err, selectedPhotos) => {
            if (err) {
                // 取消选择
                return;
            }
            // 选择成功，渲染图片
            console.log(selectedPhotos[0].uri)
            this.setState({
                image: selectedPhotos[0].uri
            })
            this.props.onChooseSuccess ? this.props.onChooseSuccess(selectedPhotos) : null
        })
    }
}

//选择视频或图片的按钮
export class ChooseMediaItem extends React.Component {
    render() {
        if (this.props.mediaType == 1) {
            let ImageArray = [];
            if (this.props.ImageList) {
                for (let i = 0, len = this.props.ImageList.length; i < len; i++) {
                    let item = this.props.ImageList[i];
                    ImageArray.push(
                        <View key={i} style={{ width: 105 * unitWidth, height: 72 * unitWidth, marginTop: 10 * unitWidth, marginRight: 10 * unitWidth }}>
                            <Image
                                style={{ width: 105 * unitWidth, height: 72 * unitWidth }}
                                source={{ uri: item.uri }} resizeMode='cover' />
                            <TouchableOpacity style={{ position: 'absolute', right: 3, top: 3 }} onPress={() => {
                                this.props.onDeletePress ? this.props.onDeletePress(i) : null
                            }}>
                                <Image
                                    style={{ width: 21 * unitWidth, height: 21 * unitWidth }}
                                    source={require('../res/me_close.png')} resizeMode='cover' />
                            </TouchableOpacity>
                        </View>
                    );
                }
            }

            return (//View加大返回按钮点击范围
                <View style={[{ backgroundColor: Colors.white }, this.props.style]}>
                    {this.props.ImageList && this.props.ImageList.length > 0 ?
                        <View style={{
                            alignSelf: 'stretch',
                            alignItems: 'center',
                            flexDirection: 'row',
                            flexWrap: 'wrap',
                            marginVertical: 15 * unitWidth
                        }}>
                            {ImageArray}
                            {this.props.ImageList && this.props.ImageList.length < 9 ?
                                <TouchableOpacity onPress={this.requestCameraPermission.bind(this)}>
                                    <Image style={{
                                        width: 105 * unitWidth,
                                        height: 72 * unitWidth, marginTop: 10 * unitWidth
                                    }} source={require('../res/smrz_add.png')} resizeMode='stretch' />
                                </TouchableOpacity> : null}
                        </View> :
                        <TouchableOpacity style={{ alignSelf: 'center', marginVertical: 15 * unitWidth }} onPress={this.props.onPress}>
                            <Image style={{
                                width: 335 * unitWidth,
                                height: 50 * unitWidth,
                            }} source={require('../res/pj_scpic.png')} resizeMode='stretch' />
                        </TouchableOpacity>}
                </View>
            );
        } else if (this.props.mediaType == 2) {
            return (//View加大返回按钮点击范围
                <TouchableOpacity onPress={this.props.onPress} style={this.props.style}>
                    {this.props.videoUrl ?
                        <Video
                            ref={(ref) => this.videoPlayer = ref}
                            source={{ uri: this.props.videoUrl }}
                            rate={1.0}
                            volume={1.0}
                            muted={false}
                            paused={false}
                            resizeMode='contain'
                            playWhenInactive={false}
                            playInBackground={false}
                            ignoreSilentSwitch={'ignore'}
                            progressUpdateInterval={250.0}
                            onLoad={this._onLoaded}
                            style={{
                                width: 345 * unitWidth, height: 150 * unitWidth, backgroundColor: Colors.black, marginVertical: 15 * unitWidth
                            }} /> :
                        <TouchableOpacity style={{ alignSelf: 'center', marginVertical: 15 * unitWidth }} onPress={this.props.onPress}>
                            <Image style={{
                                width: 335 * unitWidth,
                                height: 50 * unitWidth,
                            }} source={require('../res/pj_scpic.png')} resizeMode='stretch' />
                        </TouchableOpacity>}
                </TouchableOpacity>
            );
        } else {
            return (//View加大返回按钮点击范围
                <TouchableOpacity onPress={this.props.onPress} style={this.props.style}>
                    <TouchableOpacity style={{ alignSelf: 'center', marginVertical: 15 * unitWidth }} onPress={this.props.onPress}>
                        <Image style={{
                            width: 335 * unitWidth,
                            height: 50 * unitWidth,
                        }} source={require('../res/pj_scpic.png')} resizeMode='stretch' />
                    </TouchableOpacity>
                </TouchableOpacity>
            );
        }
    }

    //选择照片
    requestCameraPermission() {
        try {
            Permissions.request('camera', {
                type: 'always',
            }).then(response => {
                console.log(response)
                if (response === 'authorized') {
                    this.doChoose();
                }
            }).catch(err => {
                console.log(err)
            })
        } catch (err) {
            console.log(err);
        }
    }

    doChoose() {
        // width	int	图片宽度
        // height	int	图片高度
        // uri	string	图片路径
        // original_uri	string	图片原始路径，仅 Android
        // type	string	文件类型，仅 Android，当前只返回 image
        // size	int	图片大小，单位为字节 b
        // base64	string	图片的 base64 编码，如果 enableBase64 设置 false，则不返回该属性
        SyanImagePicker.showImagePicker({
            imageCount: 9 - this.props.ImageList.length,
            isCamera: false,
            minimumCompressSize: 100,
            quality: 50,
            enableBase64: true
        }, (err, selectedPhotos) => {
            if (err) {
                // 取消选择
                return;
            }
            // 选择成功，渲染图片
            console.log(selectedPhotos[0].uri)
            this.setState({
                image: selectedPhotos[0].uri
            })
            this.props.onChooseSuccess ? this.props.onChooseSuccess(selectedPhotos) : null
        })
    }
}

//选择单张图片和输入框Item项
export class ChooseSingleImageAndEditItem extends Component {

    constructor(props) {
        super(props);
        this.state = {
            image: ''
        }
    }

    render() {
        return (//View加大返回按钮点击范围
            <View style={[{ backgroundColor: Colors.white }, this.props.style]}>
                <View style={{ flexDirection: 'row', marginHorizontal: 20 * unitWidth, alignItems: 'center', height: 50 * unitWidth, }}>
                    <Text style={{ fontSize: 17, color: Colors.black }}>{this.props.title}</Text>
                    <TextInput
                        style={{
                            flex: 5,
                            fontSize: 17
                        }}
                        onChangeText={(text) => {
                            let newText = TextUtil.getTextInput(text, this.props.filterType)
                            this.setState({
                                value: newText
                            })
                            this.props.onChangeText ? this.props.onChangeText(newText) : null;
                        }}
                        keyboardType={this.props.keyboardType}
                        maxLength={this.props.maxLength}
                        secureTextEntry={this.props.secureTextEntry}
                        placeholder={this.props.placeholder}
                        value={this.state.value}
                        editable={this.props.editable}
                    />
                </View>
                <TouchableOpacity onPress={this.requestCameraPermission.bind(this)} style={{ alignSelf: 'center', marginBottom: 15 * unitWidth }} activeOpacity={0.5}>
                    {this.state.image && this.state.image != '' ?
                        <Image style={{
                            width: 335 * unitWidth,
                            height: 100 * unitWidth,
                            alignItems: 'center',
                            flexDirection: 'column',
                            borderRadius: 5
                        }} source={{ uri: this.state.image }} resizeMode='contain' /> :
                        <ImageBackground style={{
                            width: 335 * unitWidth,
                            height: 50 * unitWidth,
                            alignItems: 'center',
                            flexDirection: 'column',
                            borderRadius: 5,
                        }} source={require('../res/me_hbaddgghb.png')} resizeMode='stretch' />}
                </TouchableOpacity>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }

    //选择照片
    requestCameraPermission() {
        try {
            Permissions.request('camera', {
                type: 'always',
            }).then(response => {
                console.log(response)
                if (response === 'authorized') {
                    this.doChoose();
                }
            }).catch(err => {
                console.log(err)
            })
        } catch (err) {
            console.log(err);
        }
    }

    doChoose() {
        // width	int	图片宽度
        // height	int	图片高度
        // uri	string	图片路径
        // original_uri	string	图片原始路径，仅 Android
        // type	string	文件类型，仅 Android，当前只返回 image
        // size	int	图片大小，单位为字节 b
        // base64	string	图片的 base64 编码，如果 enableBase64 设置 false，则不返回该属性
        SyanImagePicker.showImagePicker({
            imageCount: 1,
            isCamera: false,
            minimumCompressSize: 100,
            quality: 50,
            enableBase64: true
        }, (err, selectedPhotos) => {
            if (err) {
                // 取消选择
                return;
            }
            // 选择成功，渲染图片
            console.log(selectedPhotos[0].uri)
            this.setState({
                image: selectedPhotos[0].uri
            })
            this.props.onChooseSuccess ? this.props.onChooseSuccess(selectedPhotos) : null
        })
    }
}

//选择时间Item项
export class ChooseTimeItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            time: this.props.time
        }
    }

    render() {
        return (
            <View style={[{ backgroundColor: Colors.white }, this.props.style]}>
                <TouchableOpacity style={[{ backgroundColor: Colors.white, height: 60 * unitWidth, width: width, alignItems: 'center', flexDirection: 'row' }, this.props.style]}
                    onPress={() => {
                        TimePickerUtil.dates({
                            success: (data) => {
                                this.setState({
                                    time: data
                                })
                                this.props.onChooseSuccess ? this.props.onChooseSuccess(data) : null
                            }
                        });
                    }} activeOpacity={0.5}>
                    <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>{this.props.title}</Text>
                    {this.state.time == '' ?
                        <Text style={{ color: Colors.color99, fontSize: 15, marginRight: 15 * unitWidth }}>{this.props.tips}</Text>
                        :
                        <Text style={{ color: Colors.black, fontSize: 15, marginRight: 15 * unitWidth }}>{this.state.time}</Text>
                    }
                    <View style={{ flexDirection: 'row', alignItems: 'center', position: 'absolute', right: 20 * unitWidth, justifyContent: 'flex-end' }}>
                        <Image source={require('../res/me_back.png')} style={{ width: 7 * unitWidth, height: 12 * unitWidth }} />
                    </View>
                </TouchableOpacity>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//显示隐藏item项
export class HideItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentWillUnmount() {

    }

    render() {
        return (
            <TouchableOpacity style={this.props.style} activeOpacity={0.7} onPress={this.props.onPress}>
                <View style={{
                    width: width, height: 40 * unitWidth, flexDirection: 'row', justifyContent: 'space-between',
                    paddingHorizontal: 20 * unitWidth, backgroundColor: Colors.white, alignItems: 'center'
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        <Text style={{ color: Colors.black, fontSize: 15 }}>{this.props.title}</Text>
                    </View>
                    {this.props.isShow ?
                        <Image style={{ width: 10 * unitWidth, height: 5 * unitWidth }} source={require('../res/zgd_xqxqxl.png')} resizeMode='stretch' />
                        :
                        <Image style={{ width: 10 * unitWidth, height: 5 * unitWidth }} source={require('../res/ic_arrow_2.png')} resizeMode='stretch' />
                    }
                </View>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </TouchableOpacity>
        );
    }
}

//前面标题后面带值的item
export class TextItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentWillUnmount() {

    }

    render() {
        return (
            <View style={this.props.style}>
                <View style={{
                    width: width, minHeight: 50 * unitWidth, flexDirection: 'row', paddingHorizontal: 20 * unitWidth,
                    backgroundColor: Colors.white, alignItems: 'flex-start', paddingVertical: 15 * unitWidth
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        <Text style={[{ color: Colors.black, fontSize: 15 }, this.props.titleStyle]}>{this.props.title}</Text>
                    </View>
                    <Hyperlink linkStyle={{ color: '#2980b9' }} onPress={(url, text) => { contactBrowser(url) }}>
                        <Text selectable={true} style={{ color: Colors.black, fontSize: 15, marginRight: 55 * unitWidth }}>{this.props.value}</Text>
                    </Hyperlink>
                </View>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//需求详情零部件的item
export class ComponentItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentWillUnmount() {

    }

    render() {

        let ImageArray = [];
        if (this.props.ImageList) {
            for (let i = 0, len = this.props.ImageList.length; i < len; i++) {
                let item = this.props.ImageList[i];
                ImageArray.push(
                    <TouchableOpacity key={i} style={{ width: 105 * unitWidth, height: 72 * unitWidth, marginTop: 10 * unitWidth, marginRight: 10 * unitWidth }}
                        activeOpacity={0.7} onPress={() => { NavigationService.navigate('BigImageList', { imageList: this.props.ImageList }) }}>
                        <FastImage
                            style={{ width: 105 * unitWidth, height: 72 * unitWidth }}
                            source={{ uri: item }} resizeMode={FastImage.resizeMode.cover} />
                    </TouchableOpacity>
                );
            }
        }

        return (
            <View style={[{ backgroundColor: Colors.white }, this.props.style]}>
                <View style={{
                    width: width, flexDirection: 'row', paddingRight: 20 * unitWidth, paddingLeft: 10 * unitWidth,
                    alignItems: 'flex-start', paddingTop: 15 * unitWidth
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        <Text style={{ color: Colors.black, fontSize: 15 }}>{this.props.count}.零件名称：</Text>
                    </View>
                    <Text style={{ color: Colors.black, fontSize: 15, marginRight: 55 * unitWidth }}>{this.props.value1}</Text>
                </View>
                <View style={{
                    width: width, flexDirection: 'row', paddingHorizontal: 20 * unitWidth,
                    alignItems: 'flex-start', paddingTop: 10 * unitWidth
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        <Text style={{ color: Colors.black, fontSize: 15 }}>加工数目：</Text>
                    </View>
                    <Text style={{ color: Colors.black, fontSize: 15, marginRight: 55 * unitWidth }}>{this.props.value2}</Text>
                </View>
                <View style={{
                    width: width, flexDirection: 'row', paddingHorizontal: 20 * unitWidth,
                    alignItems: 'flex-start', paddingTop: 10 * unitWidth
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        <Text style={{ color: Colors.black, fontSize: 15 }}>预算金额：</Text>
                    </View>
                    <Text style={{ color: Colors.black, fontSize: 15, marginRight: 55 * unitWidth }}>{this.props.value3}</Text>
                </View>
                {this.props.ImageList && this.props.ImageList.length > 0 ?
                    <View style={{
                        alignSelf: 'stretch',
                        alignItems: 'center',
                        flexDirection: 'row',
                        flexWrap: 'wrap',
                        marginLeft: 20 * unitWidth, marginVertical: 10 * unitWidth
                    }}>
                        {ImageArray}
                    </View> :
                    null}
                {this.props.des ?
                    <View style={{
                        width: width, flexDirection: 'row', paddingHorizontal: 20 * unitWidth,
                        alignItems: 'flex-start', marginBottom: 10 * unitWidth
                    }}>
                        <Hyperlink linkStyle={{ color: '#2980b9' }} onPress={(url, text) => { contactBrowser(url) }}>
                            <Text style={{ color: Colors.black, fontSize: 15 }}>项目说明：{this.props.des}</Text>
                        </Hyperlink>
                    </View> : null}
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//需求详情报价的item
export class QuoteItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentWillUnmount() {

    }

    render() {
        return (
            <TouchableOpacity style={this.props.style} activeOpacity={0.7} onPress={this.props.toCompanyDetail}>
                <View style={{
                    width: width, minHeight: 50 * unitWidth, flexDirection: 'row', paddingHorizontal: 20 * unitWidth,
                    backgroundColor: Colors.white, alignItems: 'center', paddingVertical: 15 * unitWidth, justifyContent: 'space-between'
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        <Text style={{ color: Colors.black, fontSize: 14 }}>{this.props.count}.{this.props.title}</Text>
                    </View>
                    <TouchableOpacity style={{ alignItems: 'flex-end' }} activeOpacity={0.7} onPress={() => { NavigationService.navigate('QuoteDetail', { id: this.props.id, type: this.props.type }) }}>
                        <Text style={[{ color: Colors.colorOrange, fontSize: 14 }, this.props.valueStyle]}>{this.props.value}</Text>
                        <Text style={{ color: Colors.black, fontSize: 11, borderBottomWidth: 0.5 }}>查看报价清单</Text>
                    </TouchableOpacity>
                </View>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </TouchableOpacity>
        );
    }
}

//发需求零部件的item
export class ReleaseComponentItem extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            name: '',
            count: 0,
            money: 0,
            remark: '',
            img: [],

            imageList: [],
        }
    }

    componentWillUnmount() {

    }

    render() {
        return (
            <View style={[{ backgroundColor: Colors.white }, this.props.style]}>
                <View style={{
                    width: width, flexDirection: 'row', paddingRight: 20 * unitWidth, paddingLeft: 8 * unitWidth,
                    alignItems: 'center', height: 45 * unitWidth
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        <Text style={{ color: Colors.black, fontSize: 15 }}>{this.props.count}.零件名称：</Text>
                    </View>
                    <TextInput
                        style={{
                            flex: 5,
                            fontSize: 14
                        }}
                        onChangeText={(text) => {
                            this.setState({
                                name: text
                            })
                        }}
                        maxLength={100}
                        placeholder='请输入零件名称'
                        value={this.state.name}
                    />
                </View>
                <View style={{
                    width: width, flexDirection: 'row', paddingHorizontal: 20 * unitWidth,
                    alignItems: 'center', height: 45 * unitWidth
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        <Text style={{ color: Colors.black, fontSize: 15 }}>加工数目：</Text>
                    </View>
                    <TextInput
                        style={{
                            flex: 5,
                            fontSize: 14
                        }}
                        onChangeText={(text) => {
                            let newText = TextUtil.getTextInput(text, 1)
                            this.setState({
                                count: newText
                            })
                        }}
                        maxLength={10}
                        placeholder='请填写加工数目'
                        value={this.state.count}
                    />
                </View>
                <View style={{
                    width: width, flexDirection: 'row', paddingHorizontal: 20 * unitWidth,
                    alignItems: 'center', height: 45 * unitWidth
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        <Text style={{ color: Colors.black, fontSize: 15 }}>预算金额：</Text>
                    </View>
                    <TextInput
                        style={{
                            flex: 5,
                            fontSize: 14
                        }}
                        onChangeText={(text) => {
                            let newText = TextUtil.getTextInput(text, 2)
                            this.setState({
                                money: newText
                            }, () => {
                                this.props.onMoneyChange ? this.props.onMoneyChange() : null
                            })
                        }}
                        maxLength={10}
                        placeholder='请填写预算金额'
                        value={this.state.money}
                    />
                </View>
                <ChooseMultiplyImageItem
                    style={{}}
                    ImageList={this.state.imageList}
                    onDeletePress={(index) => {
                        this.state.imageList.splice(index, 1);
                        this.setState({
                            imageList: this.state.imageList
                        })
                    }}
                    onChooseSuccess={(selectedPhotos) => {
                        this.setState({
                            imageList: [...this.state.imageList, ...selectedPhotos]
                        })
                    }}
                    isLast={true} />
                <View style={{
                    width: width, paddingHorizontal: 20 * unitWidth, minHeight: 75 * unitWidth,
                    alignItems: 'flex-start', marginBottom: 10 * unitWidth
                }}>
                    <Text style={{ color: Colors.black, fontSize: 15 }}>项目说明(非必填)：</Text>
                    <TextInput
                        style={{
                            fontSize: 14
                        }}
                        onChangeText={(text) => {
                            this.setState({
                                remark: text
                            })
                        }}
                        multiline={true}
                        maxLength={800}
                        placeholder='请填写项目说明'
                        value={this.state.remark}
                    />
                </View>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//发布需求=>询价类目 收货地址用
export class Item1 extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <View style={[{ backgroundColor: Colors.white }, this.props.style]}>
                <TouchableOpacity style={[{ backgroundColor: Colors.white, height: 60 * unitWidth, width: width, alignItems: 'center', flexDirection: 'row' }, this.props.style]}
                    onPress={this.props.onPress} activeOpacity={0.5}>
                    <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>{this.props.title}</Text>
                    <Text style={{
                        color: this.props.value ? Colors.black : Colors.color99, fontSize: 14,
                        width: 260 * unitWidth
                    }}>{this.props.value ? this.props.value : this.props.tips}</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center', position: 'absolute', right: 15 * unitWidth, justifyContent: 'flex-end' }}>
                        <Image source={require('../res/me_back.png')} style={{ width: 7 * unitWidth, height: 12 * unitWidth }} />
                    </View>
                </TouchableOpacity>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//实名认证实地认证展示页用到
export class TitleMultiplyImageItem extends Component {

    render() {
        let ImageArray = [];
        if (this.props.ImageList) {
            for (let i = 0, len = this.props.ImageList.length; i < len; i++) {
                let item = this.props.ImageList[i];
                ImageArray.push(
                    <TouchableOpacity key={i} style={{
                        width: 105 * unitWidth, height: 72 * unitWidth,
                        marginTop: 10 * unitWidth, marginRight: 10 * unitWidth
                    }} activeOpacity={0.7} onPress={() => {
                        NavigationService.navigate('BigImageList', { imageList: this.props.ImageList })
                    }}>
                        <Image
                            style={{ width: 105 * unitWidth, height: 72 * unitWidth }}
                            source={{ uri: item }} resizeMode='cover' />
                    </TouchableOpacity>
                );
            }
        }
        return (//View加大返回按钮点击范围
            <View style={[{ backgroundColor: Colors.white }, this.props.style]}>
                {this.props.title ?
                    <Text style={{ fontSize: 15, color: Colors.black, marginLeft: 20 * unitWidth, marginTop: 18 * unitWidth }}>{this.props.title}</Text>
                    : null}
                {this.props.ImageList && this.props.ImageList.length > 0 ?
                    <View style={{
                        alignSelf: 'stretch',
                        alignItems: 'center',
                        flexDirection: 'row',
                        flexWrap: 'wrap',
                        marginLeft: 20 * unitWidth, marginVertical: 15 * unitWidth
                    }}>
                        {ImageArray}
                    </View> :
                    null}
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//实名认证实地认证展示页用到
export class TitleTextItem extends Component {

    render() {
        return (//View加大返回按钮点击范围
            <View style={[{ backgroundColor: Colors.white }, this.props.style]}>
                <Text style={{ fontSize: 15, color: Colors.black, marginLeft: 20 * unitWidth, marginTop: 18 * unitWidth }}>{this.props.title}</Text>
                <Text style={{ fontSize: 14, color: Colors.black, marginHorizontal: 20 * unitWidth, marginVertical: 10 * unitWidth }}>{this.props.value}</Text>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//线上线下的item
export class Item2 extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        if (this.props.text == '线下') {
            return (
                <View style={[{ width: 35 * unitWidth, height: 17 * unitWidth, backgroundColor: '#FEEEE2', borderRadius: 5, alignItems: 'center', justifyContent: 'center' }, this.props.style]} >
                    <Text style={{ color: Colors.colorOrange, fontSize: 11 * unitWidth }}>{this.props.text}</Text>
                </View>
            );
        } else {
            return (
                <View style={[{ width: 35 * unitWidth, height: 17 * unitWidth, backgroundColor: '#FFE2E2', borderRadius: 5, alignItems: 'center', justifyContent: 'center' }, this.props.style]} >
                    <Text style={{ color: Colors.colorRed, fontSize: 11 * unitWidth }}>{this.props.text}</Text>
                </View>
            );
        }
    }
}

//订单详情头部流程的item
export class OrderDetailHeaderItem extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        let progress = this.props.progress > 0 ? this.props.progress : 1
        let views = [];
        let lineViews = [];
        for (let i = 0, len = this.props.list.length; i < len; i++) {
            let item = this.props.list[i]
            if (i < progress) {
                views.push(
                    <View style={{ alignItems: 'center', flex: 1 }}>
                        <Text style={{ color: Colors.white, fontSize: 14 }}>{item}</Text>
                        <View style={{ width: 12 * unitWidth, height: 12 * unitWidth, borderRadius: 6 * unitWidth, backgroundColor: Colors.white, marginTop: 15 * unitWidth }} />
                    </View>
                )
            } else {
                views.push(
                    <View style={{ alignItems: 'center', flex: 1 }}>
                        <Text style={{ color: Colors.colorBrown, fontSize: 14 }}>{item}</Text>
                        <View style={{ width: 12 * unitWidth, height: 12 * unitWidth, borderRadius: 6 * unitWidth, backgroundColor: Colors.colorBrown, marginTop: 15 * unitWidth }} />
                    </View>
                )
            }
            if (i < len - 1) {
                if (i < progress) {
                    lineViews.push(
                        <View style={{ width: (width / len) - 30 * unitWidth, height: 1, backgroundColor: Colors.white, marginHorizontal: 15 * unitWidth }} />
                    )
                } else {
                    lineViews.push(
                        <View style={{ width: (width / len) - 30 * unitWidth, height: 1, backgroundColor: Colors.colorBrown, marginHorizontal: 15 * unitWidth }} />
                    )
                }
            }
        }

        return (
            <ImageBackground style={[{
                width: width, height: 100 * unitWidth, flexDirection: 'row',
                backgroundColor: Colors.colorOrange, paddingTop: 20 * unitWidth
            }, this.props.style]} >
                {views}
                <View style={{ position: 'absolute', bottom: 40 * unitWidth, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: width }}>
                    {lineViews}
                </View>
            </ImageBackground>
        );
    }
}

//订单详情使用到
export class Item3 extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <View style={[{ minHeight: 46 * unitWidth, backgroundColor: Colors.white }, this.props.style]} >
                <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                    <View style={{ backgroundColor: Colors.colorOrange, width: 5 * unitWidth, height: 20 * unitWidth }} />
                    <Text style={{ color: Colors.black, fontSize: 15 * unitWidth, marginLeft: 10 * unitWidth }}>{this.props.text}</Text>
                </View>
            </View>
        );
    }
}

//订单详情使用到
export class RatingItem extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <View style={[{ backgroundColor: Colors.white }, this.props.style]} >
                <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                    <Text style={{ color: Colors.color99, fontSize: 14 }}>{this.props.text}</Text>
                    <Rating
                        style={{ marginLeft: 10 * unitWidth }}
                        readonly={true}
                        startingValue={this.props.progress}
                        imageSize={14}
                    />
                </View>
            </View>
        );
    }
}